<!--我的学生板块2015.6.8JackYan-->
<link rel="stylesheet" href="css/myStu.css" />
<div class="myStu am-g-fixed am-g">
	<!--左侧栏-->
	<div class="am-u-sm-6">

<!--左内标签-->
		<div class="leftTabTitle am-fl">
			<ul>
				<li class="classItem liActive">高三六班</li>
				<li class="classItem">高三七班</li>
				<li class="classItem">高三八班</li>				
			</ul>
		</div>
		<!--左内主体-->
		<div class="leftContent am-fl am-inline-block">
			<div class="leftTop">
				<h4 class="title am-inline-block">所有学生 · <span class="studentNum">56</span><span class="studentUnit"> (人)</span></h4>
				<input type="search" placeholder="搜索学生" class="searchInp am-fr"/>
			</div>
			<div class="leftMain">
				<div class="stuList">
					<ul>
						<li class="stuItem">
							<img src="http://img4q.duitang.com/uploads/item/201505/06/20150506223203_5hiU2.jpeg" class="stuPhotoImg am-round am-img-thumbnail" />
							<span class="stuName">陈龙龙 <img class="genderImg" src="img/男.png" />  男 </span>							
						</li>
						<li class="stuItem">
							<img src="http://img4q.duitang.com/uploads/item/201505/06/20150506223203_5hiU2.jpeg" class="stuPhotoImg am-round am-img-thumbnail" />
							<span class="stuName">陈龙龙 <img class="genderImg" src="img/男.png" />  男 </span>							
						</li>
						<li class="stuItem">
							<img src="http://img4q.duitang.com/uploads/item/201505/06/20150506223203_5hiU2.jpeg" class="stuPhotoImg am-round am-img-thumbnail" />
							<span class="stuName">陈龙龙 <img class="genderImg" src="img/男.png" />  男 </span>							
						</li>						
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	<div class="am-u-sm-1">
		<span class="iconRight am-icon-chevron-right am-icon-lg"></span>
	</div>
	<!--右侧栏-->
	<div class="am-u-sm-5">
		<div class="groupItem">
			<div class="groupTitle">
				<i class="am-icon-caret-right am-icon-md"></i><span class="groupName">语文棒棒糖组合</span>
				<span class="btnGroup am-fr">
					<a class="am-icon-edit" data-am-modal="{target: '#mystu_edit_modal'}"> 编辑</a><a class="am-icon-times-circle-o"> 删除</a>
				</span>
			</div>
			<div class="groupTitle">
				<i class="am-icon-caret-right am-icon-md"></i><span class="groupName">语文棒棒糖组合</span>
				<span class="btnGroup am-fr">
					<a class="am-icon-edit" data-am-modal="{target: '#mystu_edit_modal'}"> 编辑</a><a class="am-icon-times-circle-o"> 删除</a>
				</span>
			</div>
			<div class="groupTitle active">
				<i class="am-icon-caret-right am-icon-md"></i><span class="groupName">语文棒棒糖组合</span>
				<span class="btnGroup am-fr">
					<a class="am-icon-edit" data-am-modal="{target: '#mystu_edit_modal'}"> 编辑</a><a class="am-icon-times-circle-o"> 删除</a>
				</span>
			</div>
			<div class="rightGroupList groupList">
				<div class="leftContent am-fl am-inline-block">
			<div class="leftTop">
				<h4 class="title am-inline-block">所有学生 · <span class="studentNum">04</span><span class="studentUnit"> (人)</span></h4>
				<input type="search" placeholder="搜索学生" class="searchInp am-fr"/>
			</div>
			<div class="leftMain">
				<div class="stuList">
					<ul>
						<li class="stuItem">
							<img src="http://img4q.duitang.com/uploads/item/201505/06/20150506223203_5hiU2.jpeg" class="stuPhotoImg am-round am-img-thumbnail" />
							<span class="stuName">陈龙龙 <img class="genderImg" src="img/男.png" />  男 </span>							
							<a class="am-icon-times-circle-o"> 删除</a>
						</li>
						<li class="stuItem">
							<img src="http://img4q.duitang.com/uploads/item/201505/06/20150506223203_5hiU2.jpeg" class="stuPhotoImg am-round am-img-thumbnail" />
							<span class="stuName">陈龙龙 <img class="genderImg" src="img/男.png" />  男 </span>							
							<a class="am-icon-times-circle-o"> 删除</a>
						</li>						
					</ul>
				</div>
			</div>
		</div>
			</div>
		</div>
		<button type="button" class="btnAddGroup" data-am-modal="{target: '#mystu_add_modal'}">
			<i class="am-icon-plus-circle am-icon-md" style="margin-right: 10px;"></i>
			添加新分组
		</button>
	</div>
</div>

<!--编辑对话框-->
<div class="am-modal am-modal-prompt" tabindex="-1" id="mystu_edit_modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">编辑分组</div>
    <div class="am-modal-bd">
      <input type="text" class="am-modal-prompt-input" value="鱼粉棒棒糖组合">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm>保存</span>
    </div>
  </div>
</div>

<!--添加组对话框-->
<div class="am-modal am-modal-prompt" tabindex="-1" id="mystu_add_modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">添加新分组</div>
    <div class="am-modal-bd">
      <input type="text" class="am-modal-prompt-input">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm>保存</span>
    </div>
  </div>
</div>

<script type="text/javascript" src="js/myStu.js" ></script>